<template>
  <div class="hm-user">
    <div class="userInfo">
      <img :src="data.avatar" class="userImg" />
      <h3 class="userName">{{ data.username }}</h3>
    </div>
    <van-grid :column-num="3" class="userGrid">
      <van-grid-item icon="clock-o" text="历史记录" />
      <van-grid-item icon="bookmark-o" text="我的收藏" />
      <van-grid-item icon="thumb-circle-o" text="我的点赞" />
    </van-grid>
    <van-cell-group class="userCell">
      <van-cell title="推荐分享" is-link />
      <van-cell title="意见反馈" is-link />
      <van-cell title="关于我们" is-link />
      <van-cell title="退出登录" is-link />
    </van-cell-group>
  </div>
</template>

<script>
//导入UserRequest
import { UserRequest } from "@/api/user";
export default {
  data() {
    return {
      data: {},
    };
  },
  methods: {
    getUserInfo() {
      //获取token
      const token = localStorage.getItem("token");
      console.log(token);
      UserRequest.getUserInfo(token).then((res) => {
        this.data = res.data.data;
        console.log(this.data);
      });
    },
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style scoped lang="less">
.hm-user {
  flex: 1;
  padding: 0 (10 / @vw);
  background-color: #f1f1f1;
  height: 100%;
  .userInfo {
    height: (80 / @vw);
    padding: (20 / @vw) 0;
    display: flex;
    align-items: center;
    .userName {
      padding-left: (20 / @vw);
    }
    .userImg {
      width: (80 / @vw);
      height: (80 / @vw);
      border-radius: (40 / @vw);
    }
  }

  .userGrid {
    margin: (20 / @vw) 0 (20 / @vw) 0;
  }
}
</style>
